<template>
    <div>
        <div id="lyrbox">
            <h3>评论</h3>
            <div id="red"></div>
            <router-link :to="{path:'/yunyin/asong',query:{keyword:$route.query.keyword}}"><i class="el-icon-arrow-down"></i></router-link>
            <div id="commbox">
                <div v-for="item in arr" id="combox">
                <img id="comimg" :src="item.user.avatarUrl" alt="">
                <div id="rightbox">
                    <span>{{item.user.nickname}} :</span><span> {{item.content}}</span>
                </div>
                  <div id="ico"><span class="loveico">&#xe60c; </span><span> {{item.likedCount}}</span></div>
                <div id="line"></div>
                </div>
            </div>
             
        </div> 
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:"songcom",
    data(){
        return{
            arr:'',
            text:'',
            asongid:'',
            img:'',
            name:'',
            content:'',
            like:'',
        }
    },
//   watch: {
//     // 如果路由有变化，会再次执行该方法
//     '$route': 'fetch'
//   },
   created:function(){
        this.load();
    },
    methods:{
        load: function() {
                    let that = this;
                    that.asongid=that.$route.query.keyword;
                       axios.get("http://39.101.203.189:3000/comment/hot?id=" + that.asongid+"&type=0"+"&limit=20").then(function(response) {
                        console.log(response.data.hotComments)
                        that.arr=response.data.hotComments;
                        console.log(that.arr.user.avatarUrl);
                        that.img=that.arr.user.avatarUrl;
                        that.name=that.arr.user.nickname;
                        that.content=that.arr.content;
                        that.like=that.arr.likedCount;
                    }, function(err) {})
                },
                
                
    },
    components:{
    },

}
</script>

<style scoped> 
#lyrbox{
    position: relative;
    top:0px;
    left: 420px;
    width: 760px;
    height: 560px;
    color: antiquewhite;
    display: inline-block;
  

    /* background-color: #fff; */
}
#commbox{
    width: 760px;
    height: 500px;
   overflow-y: scroll;
    overflow-x: hidden;
}
#red{
    position: relative;
    top:-10px;
    width: 700px;
    height: 4px;
    background-color:#2e0b0f;
}
#combox{
    position: relative;
    
}
#comimg{
    position: relative;
    top:0px;
    width: 70px;
    height: 75px;
}
#rightbox{
    position: relative;
    top:0px;
    left: 20px;
    display: inline-block;
    vertical-align:top;
    height: auto;
    width: 610px;
}
#line{
    position: relative;
    left: 0px;
    bottom: 0px;
    height: 2px;
    width: 680px;
    background-color: beige;
}
 .loveico {
     font-family: "iconfont" !important;
     font-size: 16px;
     font-style: normal;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-weight: 500;
     cursor: default;
 }
 #ico{
      position: relative;
      height: 0px;
     bottom: 20px;
     left:600px;
 }
.el-icon-arrow-down{
    position: absolute;
    top:15px;
    left: 70px;
    font-size: 30px;
    color: #fff;;
}
::-webkit-scrollbar {
  width: 8px; 
 
}
::-webkit-scrollbar-thumb {
  background-color:#2c2324;
  border-radius: 5px;
  height:30px;
}
</style>